<template>
	<view>
		<!--登录-->
		<!-- 背景图-->
		<view class="toubu-bj">
		</view>
		<!-- 表单-->
		<view class="from">
			<view class="from-list">
				<view class="from-item">
					<view class="spane-username">
						用户名
					</view>
					<view class="input-div">
						<input v-model="user.urUsername" class="username-input" placeholder="请输入你的用户名" />
					</view>
				</view>
				<view class="from-item">
					<view class="spane-username">
						密码
					</view>
					<view class="input-div">
						<input v-model="user.urPassword" type="password" class="username-input" placeholder="请输入你的密码" />
					</view>
				</view>
				<!-- 验证码 -->
				<view class="from-item left-captcha">
					<view class="spane-username">
						验证码
					</view>
					<view class="input-div yzm">
						<input v-model="user.captcha" style="float: left;" type="text" class="username-input duan"
							placeholder="验证码" />
						<img @click="getCaptcha" class="captcha" :src="captcha">
					</view>
				</view>
			</view>
		</view>
		<view class="button-div">
			<view class="login-button" @click="login">登录</view>
			<view class="zc-button" @click="clear">重置</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				user: {
					captcha: "",
					urPassword: "",
					urUsername: "",
					codeEncryption: "",
				},
				captcha: "",
				url: this.$url,
			}
		},
		methods: {
			clear() {
				this.user = {}
			},
			//登录
			login() {
				var data = this.user;
				uni.request({
					url: `${this.url}/index/merchantLogin`,
					method: "POST",
					data: data,
					success: ({
						data
					}) => {
						console.log(data)
						/**
						 * 	sessionStorage.setItem("urId", res.data.urId); //存储数据
						 */
						if (data.code == 200) {
							/* 登录成功*/
							var userId = data.data.userId
							sessionStorage.setItem("urId", userId);
							uni.switchTab({
								url: "../wd-my/wd-my"
							})
						}
					}
				})
			},
			getCaptcha() {
				uni.request({
					url: `${this.url}/index/captcha`,
					method: "GET",
					success: ({
						data
					}) => {
						if (data.code == 200) {
							this.captcha = data.data.captcha
							this.user.codeEncryption = data.data.codeEncryption
						}
					}
				})
			}
		},
		created() {
			this.getCaptcha()
			/* document.body.style.backgroundColor = "#FFFFFF" */
		}
	}
</script>

<style scoped>
	.zc-button:hover {
		transition: all 0.6s ease;
		background-color: #eeeff1;
	}

	.zc-button {
		position: relative;
		width: 80%;
		height: 90rpx;
		border: none;
		left: 10%;
		top: 50rpx;
		text-align: center;
		line-height: 90rpx;
		border-radius: 20px;
		background-color: #f5f6fa;
		color: #060606;
		font-size: 15px;
		font-weight: 500;
	}

	.login-button:hover {
		transition: all 0.6s ease;
		background-color: #3a86d6;
	}

	.login-button {
		position: relative;
		width: 80%;
		height: 90rpx;
		text-align: center;
		line-height: 90rpx;
		border-radius: 20px;
		left: 10%;
		background-color: #4396f4;
		color: #FFFFFF;
		font-size: 15px;
	}

	.button-div {
		position: relative;
		width: 100%;
	}

	.captcha {
		position: absolute;
		width: 20%;
		right: 180rpx;
		bottom: 5rpx;
	}

	.yzm {
		width: 100%;
		float: left;
	}

	.from-list {
		position: absolute;
		width: 100%;
	}

	.username-input {
		width: 80%;
		caret-color: #4297f4;
		caret-weight: 20px;
		font-family: "Microsoft soft";
		border-bottom: 2px solid #f9f9f9;
	}

	.username-input:hover {
		transition: all 0.6s ease;
		border-bottom: 1px solid #161616;
	}

	.input-div {
		position: relative;
		top: 30rpx;
	}

	.spane-username {
		position: relative;
		font-size: 15px;
		font-weight: 800;
	}

	.from-item {
		position: relative;
		left: 10%;
		margin-top: 80rpx;
	}

	.from {
		position: relative;
		width: 100%;
		bottom: 90rpx;
		border-radius: 30px 30px 30px 30px;
		height: 600rpx;
		background-color: #ffffff;

	}

	.toubu-bj {
		position: relative;
		width: 100%;
		height: 360rpx;
		background: linear-gradient(#55aaff, #00aaff);
	}
</style>
